<template>
  <div>
    <p>
      如下需求：我们手动封装一个单选框 <br>
      思考：我们常见的ui框架中，如el-radio：能看到通过v-model直接双向绑定一个变量,再跟个label <br>
      当选哪个的时候这个变量就等于哪个label的值，那我们自己实现呢？如下 <br>
      自己封装一个单选按钮，直接在组件标签上使用v-model，又要想一个问题，<br>
      v-model默认接收的props是value，触发的是input事件 <br>
      我想定制： <a href="https://cn.vuejs.org/v2/api/#model">点击查看如何定制</a>
    </p>
    <my-radio v-model="radio" label="label1" @change="onChange"></my-radio>
    <my-radio v-model="radio" label="label2" @change="onChange"></my-radio>
    <p>当前radio：{{radio}}</p>
  </div>
</template>
<script>
import MyRadio from './son.vue'
export default {
  components: {
    MyRadio
  },
  data(){
    return{
      radio: 'label1' // 默认选中label1
    }
  },
  methods: {
    onChange (val) {
      console.log(val);
    }
  }
}
</script>
